<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>canvas的相关学习</title>
    <style>
        /* #canvasElem {
            border: 1px solid #000;
        } */
    </style>
</head>
<body>
    <canvas 
    width="100"
    height="100"
    id="canvasElem"></canvas>
    <script>
        /**
         * fill方法： 填充， 就是将闭合的路径的内容填充具体的颜色，默认黑色
         * fillStyle： 填充样式
         * strokeStyle： 绘制线条的样式
         * rect(x, y, width, height): 快速绘制矩形
        */
        const canvasId = document.getElementById('canvasElem');
        const ctx = canvasId.getContext('2d');
        
        // 开始新的路径
        ctx.beginPath();
        // 绘制三角形
        ctx.moveTo(0,0); // 移动到起始点
        ctx.lineTo(100, 0)
        ctx.lineTo(50, 50)
        ctx.closePath(); // 闭合路径
        ctx.fillStyle = 'red'
        ctx.strokeStyle = 'green'
        ctx.fill()
        // 红色填充

        ctx.stroke(); // 描边路径
    </script>
</body>
</html>